<template>
	<view>
		<view class="userInfo">
			<view class="head">
				个人中心
			</view>
			<image v-if="!loginState" class="avatar" :src="avatar" mode="" @tap="login"></image>
			<view v-if="!loginState" class="login" @tap="login">
				登录/注册
			</view>
			<image v-if="loginState" class="avatar" :src="userInfo.userInfo.image" mode=""></image>
			<view v-if="loginState" class="login">
				{{userInfo.userInfo.phone}}
			</view>
		</view>
		<!-- 订单 -->
		<view class="card">
			<view class="first">
				<view class="">我的订单</view>
				<view class="all-order" @tap="openOrderList(0)">
					<view class="">全部订单</view>
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode=""></image>
				</view>
			</view>
			<view class="second">
				<view class="status" @tap="openOrderList(1)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/daifukuan@2x.png" mode=""></image>
					<view class="">待付款</view>
				</view>
				<view class="status" @tap="openOrderList(2)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/yuyuezhong@2x.png" mode=""></image>
					<view class="">预约中</view>
				</view>
				<view class="status" @tap="openOrderList(3)">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/fuwuzhong@2x (1).png" mode=""></image>
					<view class="">进行中</view>
				</view>
				<view class="status" @tap="JumpRefund">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/tuikuan@2x.png" mode=""></image>
					<view class="">退款</view>
				</view>
			</view>
		
		</view>
		<!-- 广告 -->
		<view class="box-adv">
			<image class="advertisemen" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/guanggao@2x.png" mode=""></image>
		</view>
		<view class="mt-1">
			<view class="menu"  @tap="opendocperson">
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/jiuzhenduixiang@2x.png" mode=""></image>
					<view class="" style="color: #666666;">就诊对象</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu" @tap='Platformstatement'>
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/pingtaishengming@2x.png" mode=""></image>
					<view style="color: #666666;" class="">平台声明</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu" @tap="opencommonproblem">
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/changjianwenti@2x.png" mode=""></image>
					<view class="" style="color: #666666;">常见问题</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu" @tap="tel">
				<view class="title">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/lianxikefu@2x.png" mode=""></image>
					<view class="" style="color: #666666;">联系客服</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="menu" @tap="opensetting">
				<view class="title box d-ai-c">
					<image src="../../static/shezhi@2x.png" mode=""></image>
					<view class="" style="color: #666666;">设置</view>
				</view>
				<view class="icon">
					<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/qiantou.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/default.png',
			}
		},
		onShow() {
			if(this.loginState){
				this.getUserInfo()
			}
			
		},
		computed: mapState(['loginState', 'userInfo']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			tel(tel){
				uni.makePhoneCall({
					phoneNumber:'4008-702-365'
				})
			},
			opencommonproblem(){
				uni.navigateTo({
					url:'commonproblem'
				})
			},
			opendocperson(){
				uni.navigateTo({
					url:'../index/doc-person'
				})
			},
			openOrderList(num){
				uni.navigateTo({
					url:'Allorder?num='+num
				})
			},
			JumpRefund(){
				uni.navigateTo({
					url:'Allrefund'
				})
			},
			Platformstatement(){
				uni.navigateTo({
					url:'Platformstatement'
				})
			},
			login(){
				uni.navigateTo({
					url:'author'
				})
			},
			opensetting(){
				uni.navigateTo({
					url:'setting'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
page{
	background: #F2F7FF;
	// padding: 30rpx;
}
.userInfo{
	width: 750rpx;
	height: 360rpx;
	background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/mine/bg@2x.png) no-repeat;
	background-size: cover;
	text-align: center;
	overflow: hidden;
	.head{
		margin-top: 65rpx;
		font-size: 30rpx;
		color: white;
	}
	.avatar{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-top: 30rpx;
	}
	.login{
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight:500;
	}
}
.card {
			margin: 0 auto;
			padding: 30rpx;
			width: 690rpx;
			height: 180rpx;
			background: #FFFFFF;

			.first {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bolder;
				color: #333333;

				.all-order {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}

				image {
					margin-left: 10rpx;
					width: 9rpx;
					height: 18rpx;
				}
			}

			.second {
				display: flex;
				justify-content: space-around;
				margin-top: 30rpx;

				.status {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.icon-num{
						width: 30rpx;
						height: 30rpx;
						color: #FFFFFF;
						background: #FFBD66;
						border-radius: 50%;
						position: absolute;
						left: 30rpx;
						top: -20rpx;
						}
					view {
						margin-top: 10rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					image {
						width: 68rpx;
						height: 68rpx;
					}
				}

			}
		}
.box-adv{
	margin-top: 20rpx;
	text-align: center;	
		.advertisemen{
			width: 690rpx;
			height: 160rpx;
			text-align: center;
		}
}
.menu {
			display: flex;
			width: 690rpx;
			height: 100rpx;
			background-color: #FFFFFF;
			padding: 0 30rpx;
			margin-top: 3rpx;
			align-items: center;
			justify-content: space-between;
			.title{
				display: flex;
				align-items: center;
				view{
					margin-left: 10rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			image {
				width: 48rpx;
				height: 48rpx;
			}	
			}
			.icon {
				display: flex;
				align-items: center;
				image {
					width: 15rpx;
				}
			}
		}
</style>
